<template>

	<hr class="two" />

	<p>一个人的信息</p>
	<p>姓名：{{ person.name }}</p>
	<p>年龄：{{ person.age }}</p>
	<p>工作种类：{{ person.job.type }}</p>
	<p>工作薪水：{{ person.job.salary }}</p>
	<p>爱好：{{ person.hobby }}</p>
	<p>测试的数据c：{{ person.job.a.b.c }}</p>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {reactive} from 'vue'

export default {
	name: 'Reactive',
	setup() {
		//数据
		// 普通 object 对象转换成 Proxy 响应式对象
		let person = reactive({
			name: '张三',
			age: 18,
			job: {
				type: '前端工程师',
				salary: '30K',
				a: {
					b: {
						c: 666
					}
				}
			},
			hobby: ['抽烟', '喝酒', '烫头']
		})

		//方法
		function changeInfo() {
			person.name = '李四'
			person.age = 48
			person.job.type = 'UI设计师'
			person.job.salary = '60K'
			person.job.a.b.c = 999
			person.hobby[0] = '学习'

			console.log('Reactive changeInfo 修改了响应式信息')
		}

		//返回一个对象（常用）
		return {
			person,
			changeInfo
		}
	}
}
</script>

